<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
    <title>MyProject</title>
    <!-- 引入组件库 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>

<body>
    <div id="app">
        <p style="text-align: center;">请等待其他成员进入</p><br>
        <div style="text-align: center">
            <el-progress type="circle" :percentage="percentage" :color="customColors" :format="format" width="170">
            </el-progress><br>
        </div>
        <el-row style="text-align: center;">
            <el-button type="primary" v-show="show" @click="again">回到首页</el-button>
            </el-button>
        </el-row>
    </div>


</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                show: false,
                percentage: 100, //初始百分比为100
                user: 0,
                maxgroupper: 4,
                time: 120, //时间设定,修改时记得同时修改decrease函数
                customColors: [{
                        color: '#f56c6c',
                        percentage: 20
                    },
                    {
                        color: '#e6a23c',
                        percentage: 40
                    },
                    {
                        color: '#5cb87a',
                        percentage: 60
                    },
                    {
                        color: '#1989fa',
                        percentage: 80
                    },
                    {
                        color: '#6f7ad3',
                        percentage: 100
                    }
                ] //颜色随着百分比的变化而自动变化
            };
        },

        created() {
            axios.post('begininsert.php').then(res => {});
            this.decrease();
            this.watchusernum();
        },
        methods: {
            again() {
                window.location.href = "/index.html";
            },
            decrease() {
                let me = this;
                let interval = window.setInterval(function() {
                    let str = Number((me.time / 120) * 100).toFixed(0); //取整数
                    me.percentage = str;
                    --me.time; //每隔0.1s时间减1
                    if (me.time < 0) {
                        me.percentage = 0;
                        me.time = 0;
                        window.clearInterval(interval);
                    }
                }, 1000);
            },
            format(percentage) {
                return Math.floor(this.time / 60) + '分' + (this.time - Math.floor(this.time / 60) * 60) + '秒';
            },
            watchusernum() {
                var internal = setInterval(() => {
                    axios.get('beginuser.php').then(res => {
                        this.user = res.data;
                    });
                    if (this.user == this.maxgroupper) { //如果当前进入组内的用户达到2位，则进入投资页面
                        window.location.href = "main.php";
                        clearInterval(internal);
                    }
                    if (this.time == 0) { //当倒计时结束时弹出两个按钮，一个是离开，一个是回到首页
                        this.show = true;
                    }
                }, 500)
            },

        },
    })
</script>


</html>